function swapleft() {
  heroImage.src="images/bear-left.png";
}

function swapright() {
  heroImage.src="images/bear-right.png";
}

function istouchtree(press, xpixel, ypixel) {
	var tpixel;
	if(press == 37) { // left
		for (i=0 ; i<37 ; i++) {
			//if ( xpixel <= (treex[i] + 50) && treex[i] <= (xpixel + 50) && ypixel <= (treey[i] + 50) && treey[i] <= (ypixel + 50) ) {
			tpixel = xpixel - treex[i];
			if ( tpixel<=45 && tpixel>=0 && ypixel <= (treey[i] + 40) && treey[i] <= (ypixel + 40) )
				touchtree = true;
		}
		/*if ( xpixel == (treex[i] + 50) ) { //&& ypixel <= (treey[i] + 50) && treey[i] <= (ypixel + 50) ) {
				touchtree = true;
		}*/
	}
	else if(press == 38) { // up
		for (i=0 ; i<37 ; i++) {
			tpixel = ypixel - treey[i];
			if ( xpixel <= (treex[i] + 40) && treex[i] <= (xpixel + 40) &&  tpixel<=45 && tpixel>=0 ) {
				touchtree = true;
			}
		}
	}
	else if(press == 39) { // right
		for (i=0 ; i<37 ; i++) {
			tpixel = treex[i] - xpixel;
			if ( tpixel<=45 && tpixel>=0 && ypixel <= (treey[i] + 40) && treey[i] <= (ypixel + 40) ) {
				touchtree = true;
			}
		}
	}
	else if(press == 40) { // down
		for (i=0 ; i<37 ; i++) {
			tpixel = treey[i] - ypixel;
			if ( xpixel <= (treex[i] + 40) && treex[i] <= (xpixel + 40) &&  tpixel<=50 && tpixel>=0 ) {
				touchtree = true;
			}
		}
	}
}

var heroleft = true;
var touchtree = false;

var xpixel;
var ypixel;
var txpixel;
var typixel;
var press = 0;

// tree = 37
var treex = new Array( 50,100,150,400,450,500,  150,500,  150,300,500,700,  300,700,  250,300,650,700,  400,450,500,650,  150,200,450,  200,250,300,500,550,   50,300,550,   50,100,400,700);
var treey = new Array( 50, 50, 50, 50, 50, 50,  100,100,  150,150,150,150,  200,200,  250,250,250,250,  300,300,300,300,  350,350,350,  400,400,400,400,400,  450,450,450,  500,500,500,500);

// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 600;
document.body.appendChild(canvas);

// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
	bgReady = true;
};
bgImage.src = "images/grass4.jpg";

// Hero image
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
	heroReady = true;
};
heroImage.id = "bear";
heroImage.src = "images/bear-left.png";

// Monster image
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function () {
	monsterReady = true;
};
monsterImage.src = "images/coin.png";

// Chomp sound
var snd = new Audio("audio/bell.wav"); // Under monster image

// Game objects
var hero = { speed: 200, // movement in pixels per second
	x: 0, y: 0
};
var monster = { x: 0, y: 0 };

// Handle keyboard controls
var keysDown = {};
addEventListener("keydown", function (e) { keysDown[e.keyCode] = true; }, false);
addEventListener("keyup", function (e) { delete keysDown[e.keyCode]; }, false);
var monstersCaught = 0;

var start = true;
// Reset the game when the player catches a monster
var reset = function () {
	var i;
	var touch = false;
	var monx;
	var mony;
	if (start){
		hero.x = 350;
		hero.y = 300;
		start = false;
	}
	// Throw the monster somewhere on the screen randomly
	do {
		touch = false;
		monx = 50 * ( 1 + (Math.floor(Math.random() * 14)));
		mony = 50 * ( 1 + (Math.floor(Math.random() * 10)));
		
		for(i=0 ; i<37 ; i++) {
			if (monx == treex[i]) {
				if (mony == treey[i]) {
					touch = true;
				}
			}	
		}
	}while(touch == true );//|| ( (monx<1 || monx>14) || (mony<50 || mony>500) ) ); // Can't born at tree
	monster.x = monx;
	monster.y = mony;
	// Throw the monster somewhere on the screen randomly
	/*do {
		monster.x = (50 * (1 + Math.floor((Math.random() * 14))));
	}while(monster.x<50 || monster.x>700); // Can't born at tree
	do {
		monster.y = (50 * (1 + Math.floor((Math.random() * 10))));
	}while(monster.y<50 || monster.y>500); // Can't born at tree*/
	
	if(snd.currentTime > 0)
	{
		snd.currentTime=0;
		//this is to make sure the sound resets if it is still playing
	}
	snd.play();
};

var update = function (modifier) {
	if (38 in keysDown) { // Player holding up
		xpixel = hero.x;
		ypixel = hero.y;
		press = 38;
		if (ypixel>50) {// Can't pass the tree
			ypixel = (ypixel > 50) ? (ypixel - hero.speed * modifier) : canvas.height - 50;
			touchtree = false;
			istouchtree(press, xpixel, ypixel);
			//if ( xpixel <= (treex[i] + 50) && treex[i] <= (xpixel + 50) && ypixel <= (treey[i] + 50) && treey[i] <= (ypixel + 50) ) {
			//	touchtree = true;
			//}
			if (touchtree == false) {
				hero.x = xpixel;
				hero.y = ypixel;
			}
		}
		//if (hero.y>50) // Can't pass the tree
		//	hero.y = (hero.y > 50) ? (hero.y - hero.speed * modifier) : canvas.height - 50;
	}
	if (40 in keysDown) { // Player holding down
		xpixel = hero.x;
		ypixel = hero.y;
		press = 40;
		if (ypixel<500) {// Can't pass the tree
			ypixel = (ypixel + hero.speed * modifier) % canvas.height;
			touchtree = false;
			istouchtree(press, xpixel, ypixel);
			if (touchtree == false) {
				hero.x = xpixel;
				hero.y = ypixel;
			}
		}
		//if (hero.y<500) // Can't pass the tree
		//	hero.y = (hero.y + hero.speed * modifier) % canvas.height;
			//hero.y = (hero.y + hero.speed * modifier) % canvas.height;
	}
	if (37 in keysDown) { // Player holding left
		if(heroleft==false) {
			heroImage = new Image();
			swapleft();
			heroleft=true;
		}
		xpixel = hero.x;
		ypixel = hero.y;
		press = 37;
		if (xpixel>50) {// Can't pass the tree
			xpixel = (xpixel > 50) ? (xpixel - hero.speed * modifier) : canvas.width - 50;
			touchtree = false;
			istouchtree(press, xpixel, ypixel);
			if (touchtree == false) {
				hero.x = xpixel;
				hero.y = ypixel;
			}
		}
		/*if(heroleft==false) {
			heroImage = new Image();
			swapleft();
			heroleft=true;
		}
		//hero.ctx.drawImage(heroImage, hero.x, hero.y);
		if (hero.x>50) // Can't pass the tree
			hero.x = (hero.x > 50) ? (hero.x - hero.speed * modifier) : canvas.width - 50;*/
	}
	if (39 in keysDown) { // Player holding right
		if(heroleft==true) {
			heroImage = new Image();
			swapright();
			heroleft=false;
		}
		xpixel = hero.x;
		ypixel = hero.y;
		press = 39;
		if (xpixel<700) {// Can't pass the tree
			xpixel = (xpixel + hero.speed * modifier) % canvas.width;
			touchtree = false;
			istouchtree(press, xpixel, ypixel);
			if (touchtree == false) {
				hero.x = xpixel;
				hero.y = ypixel;
			}
		}
		/*if(heroleft==true) {
			heroImage = new Image();
			swapright();
			heroleft=false;
		}
		//ctx.drawImage(heroImage, hero.x, hero.y);
		if (hero.x<700) // Can't pass the tree
			hero.x = (hero.x + hero.speed * modifier) % canvas.width;*/
	} // Warp to other side when it at the end of BG

	// Are they touching?
	if ( hero.x <= (monster.x + 50) && monster.x <= (hero.x + 50) && hero.y <= (monster.y + 50) && monster.y <= (hero.y + 50) ) {
		++monstersCaught; // touch each other
		reset(); }
};

// Draw everything
var render = function () {
	if (bgReady) {
		ctx.drawImage(bgImage, 0, 0); }
	if (heroReady) {
		ctx.drawImage(heroImage, hero.x, hero.y); }
	if (monsterReady) {
		ctx.drawImage(monsterImage, monster.x, monster.y); }
	// Score
	ctx.fillStyle = "rgb(255, 255, 0)";
	ctx.font = "24px Helvetica";
	ctx.textAlign = "left";
	ctx.textBaseline = "top";
	ctx.fillText("Keys caught: " + monstersCaught, 290, 32);
};

// The main game loop
var main = function () {
	var now = Date.now();
	var delta = now - then;
	update(delta / 1000); render(); then = now;
};

// Let's play this game!0
reset();
var then = Date.now();
setInterval(main, 1); // Execute as fast as possible